<template>
  <div class="post-detail-page">
    <Modal title="删除文章" :visible="visible" @model-on-close="visible=false" @model-on-show="hideAndDelete">
      <p>确定删除文章吗</p>
    </Modal>
   <article class="w-75 mx-auto mb-5 pb-3" v-if="currentPost">
      <img :src="currentImageUrl" alt="currentPost.title" class="rounded-lg img-fluid my-4" v-if="currentImageUrl">
      <h2 class="mb-4">{{currentPost.title}}</h2>
     <div class="user-profile-component border-top border-bottom py-3 mb-5 align-items-center row g-0">
       <div class="col">
         <!-- <user-profile :user="currentPost.author" v-if="typeof currentPost.author === 'object'"></user-profile> -->
        </div>
        <span class="text-muted col text-right font-italic">发表于：{{currentPost.createdAt}}</span>
     </div>
<div v-html="currentHTML"></div>
<div v-if="showEdit" class="btn-group mt-5">
  <router-link :to="{name: 'Create' , query: {id: currentPost._id}}" class="btn btn-success">编辑</router-link>
  <button class="btn btn-danger" @click.prevent="visible=true">删除</button>
</div>
   </article>
 </div>
</template>
<script lang="ts">
import { defineComponent, onMounted, computed, ref } from 'vue'
import MarkdownIt from 'markdown-it'
import { useStore } from 'vuex'
import { useRoute, useRouter } from 'vue-router'
import { GlobalDataProps, PostProps, ImageProps, UserProps, ResponseType } from '../store'
import Modal from '@/components/Modal.vue'
import createMessage from '@/createMessage'

export default defineComponent({
  name: 'PostDetail',
  components: {
    Modal
  },

  setup () {
    const store = useStore<GlobalDataProps>()
    const router = useRoute()// 这个是用来寻找跳转路由的参数的
    const route = useRouter()// 有r的是用来触发这路由跳转的，有人吗能跳转
    const md = new MarkdownIt()
    const visible = ref(false)
    const currentId = router.params.id//
    onMounted(() => {
      store.dispatch('fetchPost', currentId)
    })
    const hideAndDelete = () => {
      visible.value = false
      store.dispatch('deletePost', currentId).then((rawdata: ResponseType<PostProps>|any) => {
        createMessage('删除文章成功', 'success', 2000)
        if (rawdata.data.column) {
          setTimeout(() => {
            route.push({ name: 'Column', params: { id: rawdata.data.column } })
          }, 2000)
        }
      })
    }

    const currentPost = computed<PostProps>(() => store.getters.getCurrent(currentId))// 返回这个ref对象。

    const currentHTML = computed(() => {
      if (currentPost.value && currentPost.value.excerpt) {
        return md.render(currentPost.value.excerpt)
      }
    })
    const showEdit = computed(() => {
      const { isLogin, _id } = store.state.user
      if (currentPost.value && currentPost.value.author && isLogin) {
        const postAuthor = currentPost.value.author as UserProps
        if (postAuthor._id === _id) {
          return true
        } else {
          return false
        }
      }
    })// 就是拿到后端返回的数据里的作者信息里的_id号和你的登录信息的id号比对是否一致
    const currentImageUrl = computed(() => {
      if (currentPost.value && currentPost.value.image) {
        const { image } = currentPost.value
        return (image as ImageProps).url + '?x-oss-process=image/resize,w_300'
      } else {
        return null
      }// 这个是获取这个图片的地址。
    })
    return {
      currentImageUrl,
      currentPost,
      currentHTML,
      showEdit,
      visible,
      hideAndDelete
    }
  }
})
</script>

<style>

</style>
